<template>
  <div class="commonpage">
    <header class="nav">
      <span @click="$back()">
        <el-icon color="#b5bac8" size="26">
          <Back />
        </el-icon>
      </span>
      <ul>
        <li>
          <NuxtImg src="/img/mylrft.png" alt="" />
          <span>{{ $t("language.hotgame.money") }}0.00</span>
          <el-icon color="#fff">
            <Plus />
          </el-icon>
        </li>
        <li @click="$openPage('/rechange')">
          {{ $t("language.hotgame.btnright") }}
        </li>
      </ul>
    </header>
    <div style="height: 40px"></div>
    <div class="hotbox">
      <div class="title">
        <AppSkeleton :loading="loadings">
          <template #ske>
            <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            ">
              <el-skeleton-item variant="image" style="width: 30px; height: 30px" />
              <el-skeleton-item variant="text" style="width: 34%; height: 30px; margin-left: 20px" />
            </div>
          </template>
          <template #main>
            <NuxtImg src="/img/nav3-9.png" alt="" />
            <strong>{{ name }}</strong>
          </template>
        </AppSkeleton>
      </div>
      <div class="expend">
        <AppSkeleton :loading="loadings">
          <template #ske>
            <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              flex-direction: column;
              align-items: center;
            ">
              <div style="
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
                <el-skeleton-item variant="text" style="width: 32%; height: 40px" />
                <el-skeleton-item variant="text" style="width: 32%; height: 40px" />
                <el-skeleton-item variant="text" style="width: 32%; height: 40px" />
              </div>
              <div style="
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              ">
                <el-skeleton-item variant="text" style="width: 100%; height: 40px; margin-top: 10px" />
              </div>
            </div>
          </template>
          <template #main>
            <div>
              <el-select v-model="value" class="select" popper-class="downselect" placeholder="Provedor" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-model="value" class="select" popper-class="downselect" placeholder="Tags" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-select v-model="value" class="select" popper-class="downselect" placeholder="Jogar" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div>
              <!-- <input ref="iii"  :type="type" v-model="value1"> -->
              <el-input ref="iii" :prefix-icon="Search" v-model="value1" class="search" size="large" placeholder="" />
            </div>
          </template>
        </AppSkeleton>
      </div>
      <ul class="hot">
        <li class="clist">
          <div class="clist-item">
            <dl>
              <dd v-for="(item, index) in clist" :key="index">
                <AppSkeleton :loading="loadings">
                  <template #ske>
                    <div style="width: 100%">
                      <el-skeleton-item variant="h3" style="width: 80%" />
                      <el-skeleton-item variant="image" style="width: 100%; height: 170px; margin-top: 10px" />
                    </div>
                  </template>
                  <template #main>
                    <div class="item-center">
                      <span>{{ item.name }}</span>
                      <div>
                        <NuxtImg class="target" src="/img/ha1.png" alt="" />
                        <NuxtImg :src="item.img" alt="" />
                      </div>
                    </div>
                  </template>
                </AppSkeleton>
              </dd>
            </dl>
          </div>
        </li>
      </ul>
      <strong class="btnv">{{ $t("language.hotgame.btnv") }}</strong>
      <div class="clist-itemp">
        <h4>
          <div>
            <NuxtImg src="/img/ha1.png" alt="" />
            <strong>{{ $t("language.home.module1") }}</strong>
          </div>
          <div>
            <el-icon color="#fff" size="20">
              <ArrowRight />
            </el-icon>
          </div>
        </h4>
        <dl>
          <dd v-for="(item, index) in citem" :key="index">
            <AppSkeleton :loading="loadings">
              <template #ske>
                <div style="width: 100%">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                  <el-skeleton-item variant="image" style="width: 100%; height: 170px; margin-top: 10px" />
                </div>
              </template>
              <template #main>
                <div class="item-center">
                  <span>{{ item.name }}</span>
                  <div>
                    <NuxtImg class="target" src="/img/ha1.png" alt="" />
                    <NuxtImg :src="item.img" alt="" />
                  </div>
                </div>
              </template>
            </AppSkeleton>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, nextTick, onMounted, reactive } from "vue";
import { Back, Search, Plus, ArrowRight } from '@element-plus/icons-vue'
const route = useRoute();
const name = route.query.name;
let loadings = shallowRef<boolean>(false);
onMounted(() => {
  nextTick(() => {
    // loadings.value = false;
    // let time = setInterval(() => {
    //   loadings.value = false;
    //   clearInterval(time);
    // }, 500);
  });
});
// let type = ref('password')
// let iii:any=ref(null)
// let changetype =async () => {
//   type.value = 'text'
//   await nextTick()
//   iii.value.focus()
// }
const value = shallowRef<string>("");
const value1 = shallowRef<string>("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
let clist = reactive<{ name: string, img: string, topleft: string }[]>([
  {
    name: "Fortune Tiger",
    img: "/img/game_02.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_03.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_04.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_06.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_05.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c1.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c2.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c3.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c4.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c5.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c6.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c7.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c8.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c9.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c10.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c11.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c6.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b1.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b2.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b3.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b5.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b5.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/b6.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c13.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c14.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/c15.jpg",
    topleft: "/img/topleft.png",
  },

  {
    name: "Fortune Tiger",
    img: "/img/d1.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/d2.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/d3.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/d4.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/d5.jpg",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/d6.jpg",
    topleft: "/img/topleft.png",
  },
]);
let citem = reactive<{ name: string, img: string, topleft: string }[]>([
  {
    name: "Fortune Tiger",
    img: "/img/game_02.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_02.png",
    topleft: "/img/topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "/img/game_03.png",
    topleft: "/img/topleft.png",
  },
]);
</script>
<style lang="scss">
.downselect {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;

  .is-focus,
  .el-input__inner {
    border-color: #0a906c !important;
  }

  .el-select__wrapper {
    color: #fff !important;
  }

  .el-select__selected-item span {
    color: #fff !important;
  }

  .el-scrollbar__view {
    background-color: rgb(39, 42, 48) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-scrollbar__wrap {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-select-dropdown {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgb(50, 53, 62) !important;
  }

  .el-select-dropdown__list {
    background-color: rgb(50, 53, 62) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .el-popper__arrow::before {
    background-color: rgb(50, 53, 62) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* 当select元素获得焦点时的样式 */
  .el-input__inner.is-focused {
    border-color: rgb(0, 144, 109) !important;
  }

  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(39, 42, 48) !important;
  }

  .el-input.is-focus .el-input__inner {
    border-color: #0a906c !important;
  }

  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(50, 53, 62) !important;
  }

  .el-select-dropdown__item {
    background-color: rgb(50, 53, 62) !important;
    color: #b9bdc9 !important;
  }

  .el-select-dropdown__item:hover {
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
.commonpage {
  width: 100%;
  padding-bottom: 80px;

  header {
    @include flex(row, space-between, center);
    height: 40px;
    padding: 0 10px;
    background-color: rgb(36, 39, 42);
    position: fixed;
    width: 100%;
    z-index: 9999;
    left: 0;
    top: 0;

    >span {
      width: 28px;
      height: 28px;
      border: 2px solid #b5bac8;
      display: block;
      border-radius: 16px;
      cursor: pointer;
      @include flex(row, center, center);
    }

    ul {
      height: 100%;
      @include flex(row, flex-end, center);

      li {
        border-radius: 5px;
        @include flex(row, center, center);
        height: 30px;
        padding: 0 10px;

        img {
          width: 16px;
        }

        span {
          color: #fff;
          font-size: 14px;
          display: block;
          margin: 0 4px;
        }
      }

      li:nth-child(1) {
        background-color: #31353e;
      }

      li:nth-child(2) {
        margin-left: 10px;
        background-image: linear-gradient(-30deg, #835eef, #926ef9),
          linear-gradient(#2d3035, #2d3035);
        color: #fff;
        font-size: 16px;
      }
    }
  }

  .hotbox {
    width: 100%;

    .expend {
      width: 100%;
      padding: 0 10px;

      >div {
        margin-bottom: 10px;
      }

      >div:nth-child(1) {
        @include flex(row, space-between, center);

        .select+.select {
          margin-left: 10px;
        }
      }

      :deep(.el-select__wrapper) {
        background-color: rgb(39, 42, 48);
        box-shadow: none;
        border: 1px solid #4a4c53;
        border-radius: 10px;
      }

      :deep(.el-input__wrapper) {
        background-color: rgb(39, 42, 48);
        border-radius: 10px;
        box-shadow: none;
        border: 1px solid #4a4c53;
        height: 40px;
      }
    }

    .title {
      padding: 0 10px;
      @include flex(row, flex-start, center);
      margin: 30px 0;

      img {
        width: 30px;
        margin-right: 15px;
      }

      strong {
        font-size: 30px;
        color: #b5bac8;
      }
    }

    .btnv {
      margin: 30px auto 40px;
      display: block;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background-color: #0c8560;
      border-radius: 5px;
      text-align: center;
      font-weight: normal;
      font-size: 14px;
      color: #fff;
    }

    .hot {
      width: 100%;
      height: 100%;
      padding: 20px 0px 0px;

      .navbar {
        width: 100vw;
        height: 40px;
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
      }

      .clist {
        width: 100%;

        .clist-item {
          padding: 0 10px;
          width: 100%;
          background-size: cover;

          dl {
            @include flex(row, space-between, flex-start);
            width: 100%;
            flex-wrap: wrap;

            dd {
              margin: 12px 0 0 0;
              width: 31%;

              .item-center {
                width: 100%;

                span {
                  font-size: 16px;
                  color: #b5bac8;
                  display: block;
                  margin-bottom: 10px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                div {
                  width: 100%;
                  position: relative;
                  padding-bottom: 136.4%;
                  background-color: #1a1a1a;

                  img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-radius: 10px;
                    height: 100%;
                  }

                  .target {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 50px;
                    height: 40px;
                  }
                }
              }



            }
          }
        }

        .clist-item+.clist-item {
          margin-top: 10px;
        }
      }
    }

    .clist-itemp {
      padding: 0 10px;
      width: 100%;

      h4 {
        @include flex(row, space-between, center);
        height: 40px;

        div:nth-child(1) {
          @include flex(row, flex-start, center);
          height: 100%;

          img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
          }

          strong {
            font-size: 20px;
            color: #fff;
          }
        }


      }

      dl {
        @include flex(row, space-between, flex-start);
        width: 100%;
        flex-wrap: wrap;

        dd {
          margin: 12px 0 0 0;

          .item-center {
            width: 100%;

            span {
              font-size: 16px;
              color: #b5bac8;
              display: block;
              margin-bottom: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            div {
              width: 100%;
              position: relative;
              padding-bottom: 136.4%;
              background-color: #1a1a1a;

              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                border-radius: 10px;
                height: 100%;
              }

              .target {
                position: absolute;
                top: 0;
                right: 0;
                width: 50px;
                height: 40px;
              }
            }
          }

          width: 31%;
        }
      }
    }
  }
}
</style>
